<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：知己彼-对比页面中选择品牌
 参数：需要从父组件中传递组件中默认显示的文字
 事件：点击输入框输入进行模糊查询
-->
<template>
  <div>
    <div class="select-brand">
      <div @click="showBrandA($event)">
        <div class="search-wrap">
          <div class="search-text">
            <span>{{selectAText}}</span>
            <span class="caret"></span>
          </div>
          <input v-show="brandAOpenStatus" class="input-search" type="text" v-model="KeyWordsA"
                 placeholder="输入关键字模糊搜索" id="brandAInput">
        </div>
      </div>
      <div @click="showBrandB($event)">
        <div class="search-wrap">
          <div class="search-text">
            <span>{{selectBText}}</span>
            <span class="caret"></span>
          </div>
          <input v-show="brandBOpenStatus" class="input-search" type="text" v-model="KeyWordsB"
                 placeholder="输入关键字模糊搜索" id="brandBInput">
        </div>
      </div>
    </div>
    <!--点击选择品牌A弹出的品牌列表-->
    <div class="brands" v-show="brandAOpenStatus">
      <h3 class="title">品牌</h3>
      <div class="subtitle">我的关注<span :class="['float-right', 'btn-slidedown', {slideUp: showCollect}]" @click="showCollect = !showCollect"></span></div>
      <p v-if="collectBrands.length == 0" class="tip">暂无关注品牌，可在我->我的关注进行设置</p>
      <div class="" v-show="showCollect">
          <span class="item"
                v-for="item in collectBrands | filterBy KeyWordsA"
                :id="item.id"
                @click="chooseBrandA($event)"
                :class="['flex1', { 'category-active' : defaultBrand.indexOf(item.brand) > -1}]">
            {{item.brand}}
          </span>
      </div>
      <!-- <div class="subtitle">所有品牌 <span class="float-right" @click="showAllBrand = !showAllBrand">展开/收起</span></div> -->
      <div class="subtitle">所有品牌<span :class="['float-right', 'btn-slidedown', {slideUp: showAllBrand}]" @click="showAllBrand = !showAllBrand"></span></div>
      <ul v-for="item in brands | filterBy KeyWordsA" v-show="showAllBrand">
        <div class="subtitle" v-show="item.length>0">{{item[0].pinyinCapital}}</div>
        <div class="clearfix">
          <li class="item float-left"
            v-for="brand in item | filterBy KeyWordsA"
            :id="brand.id"
            @click="chooseBrandA($event)"
            :class="{ 'category-active' :  defaultBrand.indexOf(brand.brand) > -1}">
          {{brand.brand}}
        </li>
        </div>
      </ul>
    </div>
    <!--点击选择品牌B弹出的品牌列表-->
    <div class="brands" v-show="brandBOpenStatus">
      <h3 class="title">品牌</h3>
      <div class="subtitle">我的关注<span :class="['float-right', 'btn-slidedown', {slideUp: showCollect}]" @click="showCollect = !showCollect"></span></div>
      <ul class="" v-show="showcollect">
        <li class="item"
            v-for="item in collectBrands | filterBy KeyWordsB"
            :id="item.id"
            @click="chooseBrandB($event)"
            :class="['flex1', { 'category-active' : defaultBrand.indexOf(item.brand) > -1}]">
          {{item.brand}}
        </li>
      </ul>
      <div class="subtitle">所有品牌<span :class="['float-right', 'btn-slidedown', {slideUp: showAllBrand}]" @click="showAllBrand = !showAllBrand"></span></div>
      <ul v-for="item in brands | filterBy KeyWordsB" v-show="showAllBrand">
        <div class="subtitle" v-show="item.length>0">{{item[0].pinyinCapital}}</div>
        <div class="clearfix">
          <li class="item float-left"
            v-for="brand in item | filterBy KeyWordsB"
            :id="brand.id"
            @click="chooseBrandB($event)"
            :class="{ 'category-active' :  defaultBrand.indexOf(brand.brand) > -1}">
          {{brand.brand}}
        </li>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    props: ['selectAText', 'selectBText', 'defaultCategoryId', 'defaultBrand'],
    components: {},
    data () {
      return {
        showCollect: true,
        collectBrands: [],
        brands: [],
        brandAOpenStatus: false,
        brandBOpenStatus: false,
        showAllBrand: true,
        showcollect: true,
        brandActiveIndex: ''
      }
    },
    methods: {
//      显示品牌列表
      showBrandA: function (event) {
        this.brandAOpenStatus = !this.brandAOpenStatus
        this.brandBOpenStatus = false
        this.getData()
      },
      showBrandB: function (event) {
        this.brandBOpenStatus = !this.brandBOpenStatus
        this.brandAOpenStatus = false
        this.getData()
      },
//      选择品牌A
      chooseBrandA: function (event) {
        this.brandActiveIndex = event.target.id
        this.selectAText = event.target.innerText
        this.brandAOpenStatus = false
        this.defaultBrand = event.target.innerText
        if (this.selectBText.indexOf('选择品牌') === -1) {
          this.$dispatch('chooseBrand', this.selectAText, this.selectBText)
        }
      },
//      选择品牌B
      chooseBrandB: function (event) {
        this.brandActiveIndex = event.target.id
        this.selectBText = event.target.innerText
        this.brandBOpenStatus = false
        if (this.selectAText.indexOf('选择品牌') === -1) {
          this.$dispatch('chooseBrand', this.selectAText, this.selectBText)
        }
      },
//      获取当前品类下全部品牌
      getData: function () {
        this.$http.post(window.interface.brands, {category_id: this.defaultCategoryId}).then(function (res) {
          var data = res.json()
          this.brands = data.brands
          this.collectBrands = data.collectBrands
        })
      }
    },
    ready: function () {
//      阻止input框冒泡
      var inputEle = document.querySelectorAll('.input-search')
      for (var i = 0; i < inputEle.length; i++) {
        inputEle[i].addEventListener('click', function (event) {
          event.stopPropagation()
        })
      }
//      input 聚焦时页面修改页面样式, 避免页面整体被挤扁
      var brandAInput = document.getElementById('brandAInput')
      var brandBInput = document.getElementById('brandBInput')
      brandAInput.onfocus = function () {
        document.body.setAttribute('id', 'inputFocus')
      }
      brandAInput.onblur = function () {
        document.body.removeAttribute('id')
      }
      brandBInput.onfocus = function () {
        document.body.setAttribute('id', 'inputFocus')
      }
      brandBInput.onblur = function () {
        document.body.removeAttribute('id')
      }
    },
    watch: {
//     页面数据为默认时,将默认的两个品牌显示在选择产品的框中
      'defaultBrand': function (newV) {
        setTimeout(() => {
          this.selectAText = newV.split(',')[0]
          this.selectBText = newV.split(',')[1]
        }, 100)
      },
//      未执行筛选时,将默认的品类ID 作为当前的品类ID
      'defaultCategoryId': function (newV) {
        this.defaultCategoryId = newV
      }
    }
  }

</script>

<style lang="scss" scoped>
  .select-brand {
    text-align: center;
  }

  .brands {
    position: fixed;
    top: 22.5vh;
    left: 0;
    right: 0;
    padding: .3rem;
    height: 70vh;
    background: #FFF;
    overflow: scroll;
    z-index: 13;
  }

  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .input-search {
    padding-left: .2rem;
    outline: none;
    height: 100%;
    width: 65%;
    border: transparent;
    background: #f8f8f8;
    border-left: 1px solid #e4e4e4;
  }

  .search-text {
    display: inline-block;
    width: 30%;
    background: #FFF;
  }

  .search-wrap {
    position: relative;
    margin: .2rem auto;
    width: 90%;
    height: 5vh;
    line-height: 5vh;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #E4E4E4;
    z-index: 2;
    overflow: hidden;
  }

  .filter-item {
    padding: .2rem;
    border-bottom: 5px solid #f2f2f2;
  }

  .title {
    padding-bottom: .1rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
  }

  .item {
    color: rgba(153, 153, 153, 1);
    display: inline-block;
    margin: .05rem .05rem .05rem .13rem;
    width: 30%;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    border: 1px solid rgba(228, 228, 228, 1);
    border-radius: .05rem;
    overflow: hidden;

  }

  .category-active {
    background: rgba(246, 250, 255, 1) url(../../../static/img/filter-active-bg.png) no-repeat right bottom / 18%;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 10px;
  }

  .btn-slidedown{
    width: .5rem;
    height: .3rem;
    background: url("") no-repeat center / .3rem .3rem;
    -webkit-transition: all .3s;
    transform: rotate(0deg);
  }

  .slideUp{
    transform: rotate(270deg);
  }

  .tip {
    margin: 0 auto;
    padding-left: .4rem;
    text-align: left;
    color: #FFD38B;
    background: url('../../../static/img/icon-tip.png') no-repeat center left / .3rem .3rem;
  }

</style>
